<template>
  <div class="crm-module-container">
    <!-- 主要内容区域 -->
    <div class="main-layout">
      <!-- 左侧模块列表 -->
      <div class="sidebar-section">
        <div class="sidebar-content">
          <!-- 新增模块按钮 -->
          <div class="add-module-section">
            <el-button
              v-hasPermi="['crm:module:update']"
              type="primary"
              @click="openForm('create')"
              class="add-module-btn"
            >
              <Icon icon="ep:plus" class="btn-icon" />
              新增模块
            </el-button>
          </div>

          <!-- 模块列表 -->
          <div class="modules-list-section">
            <div class="section-title">
              <Icon icon="ep:menu" class="title-icon" />
              <span>模块列表</span>
            </div>

            <div class="modules-container" v-loading="loadingList">
              <el-scrollbar class="modules-scrollbar">
                <div v-if="moduleList.length > 0" class="modules-list">
                  <div
                    v-for="(item, index) in moduleList"
                    :key="'item' + index"
                    @click="changeActiveModule(index)"
                    class="module-item"
                    :class="{ 'module-active': activeModule == index }"
                  >
                    <div class="module-info">
                      <div class="module-icon">
                        <Icon icon="ep:folder" />
                      </div>
                      <div class="module-content">
                        <span class="module-name">{{ item.name }}</span>
                      </div>
                    </div>
                    <div class="module-actions">
                      <el-button
                        v-hasPermi="['crm:module:update']"
                        @click.stop="openForm('update', item.id, index)"
                        type="primary"
                        text
                        class="action-btn edit-btn"
                      >
                        <Icon icon="ep:edit" />
                      </el-button>
                      <el-button
                        v-hasPermi="['crm:module:update']"
                        @click.stop="handleDelete(item.id)"
                        type="danger"
                        text
                        class="action-btn delete-btn"
                      >
                        <Icon icon="ep:delete" />
                      </el-button>
                    </div>
                  </div>
                </div>

                <div v-else class="empty-modules">
                  <div class="empty-icon">
                    <Icon icon="ep:folder-add" />
                  </div>
                  <p class="empty-text">暂未创建模块</p>
                  <el-button
                    type="primary"
                    text
                    @click="openForm('create')"
                    class="create-first-btn"
                  >
                    <Icon icon="ep:plus" class="btn-icon" />
                    创建第一个模块
                  </el-button>
                </div>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧配置区域 -->
      <div class="config-section">
        <div class="config-content" v-loading="loading">
          <div v-if="moduleList.length > 0" class="config-tabs">
            <el-tabs
              v-model="activeName"
              tab-position="top"
              :before-leave="handleTabChange"
              class="module-tabs"
            >
              <el-tab-pane name="2">
                <template #label>
                  <div class="tab-label">
                    <Icon icon="ep:price-tag" />
                    <span>标签配置</span>
                  </div>
                </template>
              </el-tab-pane>

              <el-tab-pane name="7">
                <template #label>
                  <div class="tab-label">
                    <Icon icon="ep:switch" />
                    <span>线索自动转入</span>
                  </div>
                </template>
              </el-tab-pane>

              <el-tab-pane name="5">
                <template #label>
                  <div class="tab-label">
                    <Icon icon="ep:star" />
                    <span>客户级别配置</span>
                  </div>
                </template>
              </el-tab-pane>

              <el-tab-pane name="8">
                <template #label>
                  <div class="tab-label">
                    <Icon icon="ep:chat-dot-round" />
                    <span>跟进类型配置</span>
                  </div>
                </template>
              </el-tab-pane>

              <el-tab-pane name="3">
                <template #label>
                  <div class="tab-label">
                    <Icon icon="ep:refresh" />
                    <span>公海回收规则</span>
                  </div>
                </template>
              </el-tab-pane>

              <el-tab-pane name="4">
                <template #label>
                  <div class="tab-label">
                    <Icon icon="ep:lock" />
                    <span>客户锁定/领取上限</span>
                  </div>
                </template>
              </el-tab-pane>

              <el-tab-pane name="11">
                <template #label>
                  <div class="tab-label">
                    <Icon icon="ep:hide" />
                    <span>号码脱敏配置</span>
                  </div>
                </template>
              </el-tab-pane>

              <el-tab-pane name="9">
                <template #label>
                  <div class="tab-label">
                    <Icon icon="ep:sort" />
                    <span>线索跟进阶段配置</span>
                  </div>
                </template>
              </el-tab-pane>

              <el-tab-pane name="10">
                <template #label>
                  <div class="tab-label">
                    <Icon icon="ep:setting" />
                    <span>自定义字段设置</span>
                  </div>
                </template>
              </el-tab-pane>
            </el-tabs>

            <!-- 配置内容 -->
            <div class="config-content-wrapper">
              <module-info v-if="activeName == '1'" :moduleInfo="moduleInfoData" />
              <TagConfig v-if="activeName == '2'" :moduleId="moduleId" />
              <PoolConfig v-if="activeName == '3'" :moduleId="moduleId" />
              <LimitConfig v-if="activeName == '4'" :moduleId="moduleId" />
              <ClueTransConfig v-if="activeName == 7" :moduleId="moduleId" />
              <FollowTypeConfig v-if="activeName == 8" :moduleId="moduleId" />
              <StageConfig v-if="activeName == 9" :moduleId="moduleId" />
              <LevelConfig v-if="activeName == 5" :moduleId="moduleId" />
              <Desensitization v-if="activeName == 11" :moduleId="moduleId" />
              <CustomField v-if="activeName == 10" :moduleId="moduleId" />
            </div>
          </div>

          <div v-else class="empty-config">
            <div class="empty-illustration">
              <Icon icon="ep:document-add" class="empty-main-icon" />
            </div>
            <h3 class="empty-title">请选择模块</h3>
            <p class="empty-description">选择左侧的模块来配置相关设置</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 新增模块表单 -->
  <ModuleForm ref="clueFormRef" @success="getModuleList" />
</template>

<script setup lang="ts">
import { Edit, Delete } from '@element-plus/icons-vue'
import * as ModuleApi from '@/api/crm/Module'
import ModuleForm from './components/ModuleForm.vue'
import ModuleInfo from './components/ModuleInfo.vue'
import PoolConfig from './components/pool/index.vue'
import LimitConfig from './components/limit/index.vue'
import TagConfig from './components/tageConfig/index.vue'
import ClueTransConfig from './components/clueTransConfig/index.vue'
import FollowTypeConfig from './components/followTypeConfig/index.vue'
import StageConfig from './components/stageConfig/index.vue'
import LevelConfig from './components/levelConfig/index.vue'
import Desensitization from './components/desensitization/index.vue'
import CustomField from './components/customField/index.vue'

defineOptions({ name: 'CrmModule' })

const message = useMessage()
const activeName = ref(null)
const activeModule = ref(0)

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10
})

const moduleList = ref([])
const loadingList = ref(false)
const loading = ref(false)
const moduleId = ref(null)
const moduleInfoData = ref({})

// 获取模块列表
const getModuleList = async () => {
  loadingList.value = true
  try {
    const data = await ModuleApi.getModulePage(queryParams)
    if (data) {
      moduleList.value = data.list
      if (moduleList.value.length > 0) {
        changeActiveModule(0)
        activeName.value = '2'
      }
    }
  } finally {
    loadingList.value = false
  }
}

// 切换当前选中模块
const changeActiveModule = async (index) => {
  activeModule.value = index
  moduleInfoData.value = moduleList.value[index]
  moduleId.value = moduleList.value[activeModule.value].id
}

// 右侧tab点击切换
const handleTabChange = (tab) => {
  if (moduleList.value.length == 0) {
    ElMessage({
      message: '请先创建模块',
      type: 'error',
      plain: true
    })
    return false
  } else {
    activeName.value = tab
  }
}

// 添加/修改操作
const clueFormRef = ref()
const openForm = (type: string, id?: number, index?: number) => {
  clueFormRef.value.open(type, id)
  if (typeof index !== 'undefined') {
    activeModule.value = index
  }
}

// 删除按钮操作
const handleDelete = async (id: number) => {
  try {
    await message.delConfirm()
    await ModuleApi.deleteModule(id)
    message.success('删除成功')
    await getModuleList()
  } catch {}
}

const { query } = useRoute()

// 初始化
onMounted(() => {
  getModuleList()
  if (query.stage) {
    setTimeout(() => {
      activeName.value = query.stage
    }, 300)
  }
})
</script>

<style scoped lang="scss">
.crm-module-container {
  padding: 20px;
}

/* 页面头部 */
.page-header {
  background: linear-gradient(135deg, #97a5e2 0%, #7db5db 100%);
  border-radius: 16px;
  padding: 12px 24px;
  margin-bottom: 24px;
  color: white;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
  }
}

.header-content {
  position: relative;
  z-index: 1;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  backdrop-filter: blur(10px);
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.page-subtitle {
  font-size: 14px;
  margin: 0;
  opacity: 0.9;
}

/* 主要布局 */
.main-layout {
  display: flex;
  gap: 24px;
  height: calc(100vh - 220px);
}

/* 左侧边栏 */
.sidebar-section {
  width: 320px;
  flex-shrink: 0;
}

.sidebar-content {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
}

.add-module-section {
  padding: 20px;
  border-bottom: 1px solid rgba(0, 82, 204, 0.1);
}

.add-module-btn {
  width: 100%;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border: none;
  border-radius: 8px;
  height: 44px;
  font-weight: 500;

  .btn-icon {
    margin-right: 8px;
  }
}

.modules-list-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  border-bottom: 1px solid rgba(0, 82, 204, 0.1);
  background: linear-gradient(135deg, rgba(0, 82, 204, 0.02) 0%, transparent 100%);
}

.title-icon {
  color: #0052cc;
  font-size: 18px;
}

.modules-container {
  flex: 1;
  overflow: hidden;
}

.modules-scrollbar {
  height: 100%;
  padding: 16px 0;
}

.modules-list {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.module-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;

  &:hover {
    background: rgba(0, 82, 204, 0.05);
    border-color: rgba(0, 82, 204, 0.2);
  }

  &.module-active {
    background: linear-gradient(135deg, rgba(0, 82, 204, 0.1) 0%, rgba(0, 82, 204, 0.05) 100%);
    border-color: #0052cc;

    .module-name {
      color: #0052cc;
      font-weight: 600;
    }
  }
}

.module-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.module-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #0052cc 0%, #1d4ed8 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  flex-shrink: 0;
}

.module-name {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  transition: color 0.2s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.module-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.module-item:hover .module-actions {
  opacity: 1;
}

.action-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 6px;

  &.edit-btn:hover {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
  }

  &.delete-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
  }
}

.empty-modules {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  height: 100%;
}

.empty-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #9ca3af;
  margin-bottom: 16px;
}

.empty-text {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 16px 0;
}

.create-first-btn {
  font-size: 13px;

  .btn-icon {
    margin-right: 4px;
  }
}

/* 右侧配置区域 */
.config-section {
  flex: 1;
  overflow: hidden;
}

.config-content {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
}

.config-tabs {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.module-tabs {
  :deep(.el-tabs__header) {
    margin: 0;
    padding: 0 24px;
    background: linear-gradient(135deg, rgba(0, 82, 204, 0.02) 0%, transparent 100%);
    border-bottom: 1px solid rgba(0, 82, 204, 0.1);
  }

  :deep(.el-tabs__nav-wrap) {
    padding: 16px 0;
  }

  :deep(.el-tabs__nav-wrap::after) {
    display: none;
  }

  :deep(.el-tabs__item) {
    font-weight: 500;
    color: #6b7280;
    padding: 0 16px;
    height: 40px;
    line-height: 40px;

    &.is-active {
      color: #0052cc;
      font-weight: 600;
    }
  }

  :deep(.el-tabs__active-bar) {
    background: linear-gradient(90deg, #0052cc 0%, #1d4ed8 100%);
    height: 3px;
  }

  :deep(.el-tabs__content) {
    flex: 1;
    overflow: hidden;
  }

  :deep(.el-tab-pane) {
    height: 100%;
    overflow: auto;
  }
}

.tab-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.config-content-wrapper {
  flex: 1;
  overflow: hidden;
  padding: 24px;
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f3f4;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c1c9d2 0%, #a8b4c0 100%);
    border-radius: 3px;
    transition: all 0.2s ease;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #0052cc 0%, #1d4ed8 100%);
    box-shadow: 0 2px 4px rgba(0, 82, 204, 0.3);
  }
}

.empty-config {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 40px;
}

.empty-main-icon {
  font-size: 80px;
  color: #d1d5db;
  margin-bottom: 24px;
}

.empty-title {
  font-size: 20px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 8px 0;
}

.empty-description {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-layout {
    flex-direction: column;
    height: auto;
  }

  .sidebar-section {
    width: 100%;
    height: 300px;
  }

  .config-section {
    height: 600px;
  }
}

@media (max-width: 768px) {
  .crm-module-container {
    padding: 12px;
  }

  .page-header {
    padding: 20px;
    margin-bottom: 16px;
  }

  .main-layout {
    gap: 16px;
  }

  .sidebar-section {
    height: 250px;
  }

  .config-section {
    height: 500px;
  }

  .module-tabs {
    :deep(.el-tabs__header) {
      padding: 0 16px;
    }
  }

  .config-content-wrapper {
    padding: 16px;
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .crm-module-container {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  }

  .sidebar-content,
  .config-content {
    background: rgba(30, 41, 59, 0.95);
  }

  .page-title {
    color: #f9fafb;
  }

  .section-title {
    color: #f9fafb;
  }

  .module-name {
    color: #e5e7eb;
  }

  .empty-title {
    color: #f9fafb;
  }

  .empty-description,
  .empty-text {
    color: #d1d5db;
  }
}
</style>
